<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max {
            width: 400px;
            /* outline: 2px solid blue;/ */
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: auto;
            background: #ace1ff;;

        }

        h2 {
            text-align: center;

            font-size: 20px;

            margin: auto;
            margin-bottom: 30px;
        }

        .box {
            width: 180px;
            height: 251px;
            background-color: white;
            font-size: 15px;
            margin: 10px;
            text-align: center;

        }

        .red:hover {
            box-shadow: 0px 0px 8px gray;
            margin-top: -5px;
        }
        .red{
            transition: all 0.3s;
        }
        

        img {
           height: 110px;
            /* height: 200px; */
           margin-top: 10px;
           margin-bottom: 1px;
        }

        .min-box {
            margin-top: 8px;
            display: flex;
            justify-content: space-around;
        }

        .s1 {
            color: orangered
        }

        .s2 {
            font-size: 12px;
        }

        .s3 {
            color: orangered;
            font-size: 12px;
            width: 40px;
            height: 20px;
            border: 1px solid gray;
            border-radius: 3px;
            text-align: center;
        }

        .s4 {
            width: 45px;
            height: 20px;
            border: 1px solid gray;
            border-radius: 5px;
            text-align: center;

        }
    </style>
</head>

<body>
    <div id="app">
        <h2>你当前选择的是：{{text}}</h2>
        <my-cpn @btn="change"></my-cpn>

    </div>


    <script src="../vue-js/vue.js"></script>
    <template id="myCpn">
        <div>
            <div class="max">
                <div class="box" v-for="(item,index) in list" :key="index" @click="btnClick(index)"
                    :class="item.flag===true ? 'red' :''">
                    <img v-bind:src="item.img" alt="">
                    <p>{{item.title}}</p>
                    <div class="min-box">
                        <span class="s1">{{item.price}}<span class="s2">{{item.text}}</span></span>
                        <span class="s3">{{item.new}}</span>
                        <span class="s4">{{item.look}}</span>
                    </div>
                </div>
            </div>
        </div>

    </template>
    <script>
        let app = new Vue({
            el: "#app",
            data() {
                return {
                    text: ""

                }
            },
            methods: {
                change(val) {
                    console.log(val);
                    this.text = val
                }
            },
            components: {
                'my-cpn': {
                    template: "#myCpn",
                    data() {
                        return {
                            list: [
                                { img: './img/8.jpg', title: "蓝牙耳机 ", price: "￥999", look: '看相似', new: "上新", flag: false },
                                { img: './img/7.jpg', title: "小米11黑色,开启影响新时代", price: "￥5999", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/6.jpg', title: "小米12白色 Ultra,开启影响新时代", price: "￥5999", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/5.jpg', title: "全自动洗衣机 让生活更方便", price: "￥7199", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/1.jpg', title: "小米11 宝石蓝", price: "￥5999", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/2.png', title: "小米12全新上线", price: "￥5999", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/3.png', title: "小天才电话手表", price: "￥229", text: "起", new: "上新", look: '看相似', flag: false },
                                { img: './img/4.png', title: "小米13PRO 限时抢购", price: "￥5999", text: "起", new: "上新", look: '看相似', flag: false },

                            ]
                        }
                    },
                    methods: {
                        btnClick(i) {
                            console.log(12345);                         
                            this.$emit('btn', this.list[i].title);
                            this.list[i].flag = !this.list[i].flag
                            console.log(this.list[i].flag);

                        }
                    }
                }
            }

        })
    </script>
</body>

</html>